<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="${pageContext.request.contextPath}/static/css/reset.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/login.css?1" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/iconfont.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">
    <style type="text/css">
        /*a  upload */
        .a-upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }

        .a-upload input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }

    </style>
</head>
<body>
<div class="qt-base-wrap">
    <div class="qt-base-header">
        <div class="qt-base-headerWrap fn-clear">
            <div class="qt-loginImg">
                新生报道登记系统
            </div>
            <ul>
                <li>首页</li>
                <li>帮助</li>
                <li>联系我们</li>
            </ul>
        </div>
    </div>
    <main>
        <p class="title">报道信息采集</p>
        <form id="uploadForm" method="post">
            <ul class="qt-login-ul">
                <li>
                    <p class="title"> 姓名：</p> <input type="text" name="name" class="qt-input" id="name"
                                                       placeholder="请输入姓名">
                </li>
                <li>
                    <p class="title"> 性别：</p>
                    <select class="qt-input" name="sex" id="sex">
                        <option value="">请选择</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </li>
                <li>
                    <p class="title"> 出生日期：</p>
                    <input type="text" name="birthday" class="qt-input" id="birthday" placeholder="请输入出生日期">
                </li>
                <li>
                    <p class="title"> 身份证号：</p>
                    <input type="text" name="idCard" class="qt-input" id="idCard" placeholder="请输入身份证号">
                </li>
                <li>
                    <p class="title"> 政治面貌：</p>
                    <select class="qt-input" name="feature" id="feature">
                        <option value="">请选择</option>
                        <option value="1">团员</option>
                        <option value="2">党员</option>
                        <option value="3">群众</option>
                    </select>
                </li>
                <li>
                    <p class="title"> 准考证号：</p> <input type="text" name="admissionNumber" class="qt-input" id="admissionNumber"
                                                           placeholder="请输入准考证号">
                </li>
                <li>
                    <p class="title"> 成绩：</p> <input type="text" name="grade" class="qt-input" id="grade"
                                                       placeholder="请输入成绩">
                </li>
                <li>
                    <p class="title"> 毕业学校：</p> <input type="text" name="school" class="qt-input" id="school"
                                                           placeholder="请输入毕业学校">
                </li>
                <li>
                    <p class="title"> 本人手机号码：</p> <input type="text" name="phone" class="qt-input" id="phone"
                                                               placeholder="请输入联系电话">
                </li>
                <li>
                    <p class="title"> 家庭住址：</p> <input type="text" name="address" class="qt-input" id="address"
                                                           placeholder="请输入地址">
                </li>
                <li>
                    <p class="title" style="width: 133px"> 照片：</p>
<%--                    <img src="" width="100px" height="100px" style="margin-left: 3px">--%>
                    <input type="file" name="file" id="ID-upload-demo-form-files">
                </li>

                <li>
                    <div style="text-align:center;width:100%">
                        <button class="qt-loginbtn" type="button" id="loginbtn" onclick="registerStudent()">注册</button>
                        <a class="qt-loginbtn" href="${pageContext.request.contextPath}/toLogin">返回</a>
                    </div>
                </li>
            </ul>
        </form>
    </main>
    <div class="qt-login-fonter">
        <p>Copyright © 2023 All Rights Reserved　版权所有 思维空间</p>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/layui.min.js"></script>
<script>
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer
        // 渲染
        upload.render({
            elem: '#ID-upload-demo-form-files',
            url: 'studentImg', // 此处配置你自己的上传接口即可
            maximum: 1000000,
            done: function(res){
                layer.msg(res.msg);
                console.log(res)
                $("#file-name").text(res.filename);
            }
        });
    });
</script>
<script type="text/javascript">
    function registerStudent() {
        const name = $("input[name='name']").val().trim();
        const sex = $("select[name='sex']").val().trim();
        const birthday = $("input[name='birthday']").val().trim();
        const phoneNumber = $("input[name='phone']").val().trim();
        const idCard = $("input[name='idCard']").val().trim();
        const admissionNumber = $("input[name='admissionNumber']").val().trim();
        const grade = $("input[name='grade']").val().trim();
        const school = $("input[name='school']").val().trim();
        const feature = $("select[name='feature']").val().trim();
        const address = $("input[name='address']").val().trim();

        if (!/^[\u4E00-\u9FA5]$/.test(name)){
            layer.msg('用户名不允许包含特殊字符');
            return;
        }

        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phoneNumber)){
            layer.msg('请输入正确格式电话号码');
            return;
        }

        if(!/^\d{15}|\d{18}$/.test(idCard)){
            layer.msg('请输入正确格式身份证号码');
            return;
        }
        if (!/^[0-9]*$/.test(admissionNumber)){
            layer.msg('请输入正确格式准考证号');
            return;
        }
        if (!/^[0-9]*$/.test(grade)){
            layer.msg('请输入正确格式成绩');
            return;
        }

        const stu = {
            name: name,
            sex: sex,
            birthday: birthday,
            phoneNumber: phoneNumber,
            idCard: idCard,
            admissionNumber: admissionNumber,
            grade: grade,
            school: school,
            feature: feature,
            address: address
        };

        $.ajax({
            url: '/student',
            data: JSON.stringify(stu),
            type: 'POST',
            processData: false,
            contentType: 'application/json',
            dataType: 'json',
            success: function(data) {
                layer.msg(data.msg);
            },
            error: function(xhr, status, error) {
                console.log('Request failed:', error);
            }
        });
    }
</script>
</body>
</html>